<template>
	<view>
		<u-notice-bar :text=" text" bgColor="#ecf5ff" color="#2979ff">
		</u-notice-bar>
		<!-- 原生的ucharts的词云会出现无法读取length的问题,所以改用组件式使用 -->
		<!-- <view class="charts-box">
			<qiun-data-charts type="word" :opts="ciyunOpts" :chartData="ciyunData" />
		</view> -->

		<!-- 词云图 -->
		<view class="cu-bar bg-white margin-top-xs" style="position: relative;">
			<view class=" action sub-title">
				<text class=" text-xl text-bold text-blue text-shadow">词云图</text>
				<text class="text-ABC text-blue">DataCharts</text>
			</view>
			<button type="primary" size="small"
				style="position: absolute;right: 20rpx;height: 70%;background-color: #0081ff;font-size: 30rpx;"
				@click="addTag">我要添加</button>
		</view>
		<view class="chartsMain">
			<qiun-data-charts type="word" :opts="ciyunOpts" :chartData="ciyunData" />
			<!-- <canvas canvas-id="canvasData" id="canvasData" class="charts"></canvas> -->
		</view>
		<!-- 仪表盘 -->
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">仪表盘</text>
				<text class="text-ABC text-blue">GaugeCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
		</view>

		<!-- 折线图 -->
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">折线图</text>
				<text class="text-ABC text-blue">LineCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
		</view>
		<!-- 圆环图 -->
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">圆环图</text>
				<text class="text-ABC text-blue">ringCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		</view>
		<!-- 饼状图 -->
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">饼状图</text>
				<text class="text-ABC text-blue">PieCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
		</view>
		<!-- 行政区域图 -->
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">行政区域图·梅州市</text>
				<text class="text-ABC text-blue">AdministrativeCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<qiun-data-charts type="map" ref="map" :opts="mapOpts" :chartData="mapData" />
			<!-- <canvas canvas-id="canvasMap" id="canvasMap" class="charts" @touchstart="touchMap"></canvas> -->
		</view>
		<!-- 雷达图 -->
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">雷达图</text>
				<text class="text-ABC text-blue">RadarCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
		</view>
		<!-- 漏斗图 -->
		<!-- 		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">漏斗图</text>
				<text class="text-ABC text-blue">FunnelCharts</text>
			</view>
		</view> -->
		<!-- 	<view class="chartsMain">
			<canvas canvas-id="canvasFunnel" id="canvasFunnel" class="charts"></canvas>
		</view> -->


	</view>
</template>

<script>
	// 图表
	import uCharts from "../js/u-charts.js";
	var _self;
	var uChartsInstance = {};

	export default {
		data() {
			return {
				Custom: this.Custom,
				ciyunData: {},
				mapData: {},
				ciyunOpts: {
					// color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					// 	"#ea7ccc"
					// ],
					padding: undefined,
					extra: {
						word: {
							type: "normal",
							autoColors: true
						}
					}
				},
				mapOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					legend: {
						show: true,
						data: ['梅州市']
					},
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: "#666666",
							fillOpacity: 0.6,
							activeBorderColor: "#F04864",
							activeFillColor: "#FACC14",
							activeFillOpacity: 1
						}
					}
				},
				text: '图表使用ucharts库实现，大部分为静态数据，敬请期待作者更新...',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// 词云图
				"cyData": {
					"series": []
				},

				// 柱状图
				"Column": {
					"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
					"series": [{
						"name": "前端学习量",
						"data": [15, {
							"value": 20,
							"color": "#f04864"
						}, 45, 37, 43, 34]
					}, {
						"name": "后台学习量",
						"data": [30, {
							"value": 40,
							"color": "#facc14"
						}, 25, 14, 34, 18]
					}]
				},


				// 仪表盘
				gaugeWidth: 15,
				chartData: {
					categories: [{
						value: 0.2,
						color: '#2fc25b'
					}, {
						value: 0.8,
						color: '#f04864'
					}, {
						value: 1,
						color: '#1890ff'
					}],
					series: [{
						name: '完成率',
						data: 0.85
					}]
				},
				Gauge: {
					categories: [{
						"value": 0.2,
						"color": "#1890ff"
					}, {
						"value": 0.8,
						"color": "#2fc25b"
					}, {
						"value": 1,
						"color": "#f04864"
					}],
					series: [{
						name: "实时速度",
						data: 0.88,
						color: "#1890ff"
					}]
				},
				// 圆环图
				"Ring": {
					"series": [{
						"name": "一班",
						"data": 50
					}, {
						"name": "二班",
						"data": 30
					}, {
						"name": "三班",
						"data": 20
					}, {
						"name": "四班",
						"data": 18
					}, {
						"name": "五班",
						"data": 8
					}]
				},
				// 饼状图
				"Pie": {
					"series": [{
						"name": "一班",
						"data": 50
					}, {
						"name": "二班",
						"data": 30
					}, {
						"name": "三班",
						"data": 20
					}, {
						"name": "四班",
						"data": 18
					}, {
						"name": "五班",
						"data": 8
					}]
				},

				// 雷达图
				radar: {
					categories: ['html/css', 'JavaScript', 'Vue.js', 'uniapp', 'node.js', 'nginx'],
					series: [{
						name: '熟悉度',
						data: [90, 85, 90, 70, 60, 50]
					}]
				},
				// 折线图
				Area: {
					categories: ['6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					series: [{
						name: '学习前端',
						data: [100, 80, 95, 150, 112, 132, 151],
						color: '#facc14'
					}, {
						name: '学习后台',
						data: [70, 40, 65, 100, 44, 68, 78],
						color: '#2fc25b'
					}, {
						name: '学习设计',
						data: [35, 20, 25, 37, 4, 20, 39],
						color: '#1890ff'
					}]
				},
				timer: null
			};
		},
		onLoad() {

		},
		onReady() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(420);
			this.getServerData()
		},
		computed: {

		},
		onHide() {
			clearInterval(this.timer)
		},
		mounted() {},
		methods: {
			// 获取地图数据{
			getMapData() {
				uni.request({
					url: 'https://linbo.vip:8888/meizhouDataV.json',
					data: {},
					success: function(res) {
						let cMap = {
							series: []
						};
						cMap.series = res.data.features;
						console.log('地图数据', cMap)
						// _self.showMap("canvasMap", cMap);
						const obj = JSON.parse(JSON.stringify(cMap))
						_self.mapData = obj
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '网络错误,获取地图数据失败!'
						})
					},
				});
			},

			// 获取词云列表
			getCiyunList() {
				uni.request({
					url: this.$baseUrl + '/ciyun',
					method: 'get',
					success(res) {
						res.data.data.forEach((item) => {
							const fs = Math.floor(Math.random() * (30 - 18 + 1) + 18)
							item.textSize = fs,
								item.data = undefined
						})
						const obj = {
							series: JSON.parse(JSON.stringify(res.data.data.reverse().slice(0, 8)))
						}
						_self.ciyunData = obj
					}
				})
			},
			//给作者添加标签
			addTag() {
				uni.showModal({
					editable: true,
					placeholderText: '云端保存所有人可见',
					success(res) {
						// console.log(res.content)
						if (res.content) {
							uni.request({
								url: _self.$baseUrl + '/ciyun',
								method: 'post',
								data: {
									name: res.content
								},
								success(res) {
									if (res.data.code = 200) {
										uni.showToast({
											title: '添加成功',
											icon: 'successe',
											duration: 500
										})
										_self.getCiyunList()
									} else {
										uni.showToast({
											title: '添加失败',
											icon: 'error'
										})
									}
								}
							})
						}
					}
				})
			},
			getServerData() {
				// 词云
				_self.showRadar("canvasRadar", this.radar);
				_self.showRing("canvasRing", this.Ring);
				_self.showPie("canvasPie", this.Pie);
				_self.showArea("canvasArea", this.chartData);
				this.getCiyunList()
				this.getMapData();
				this.showGauge1("canvasGauge", this.Gauge)
				this.timer = setInterval(() => {
					const num = Math.random(100).toFixed(2)
					// console.log(num);
					this.Gauge.series[0].data = num
					if (num < 0.6) {
						this.Gauge.series[0].name = '速度太慢'
						this.Gauge.series[0].color = '#1890ff'
					} else if (num > 0.6 && num < 0.8) {
						this.Gauge.series[0].name = '超速了'
						this.Gauge.series[0].color = '#2fc25b'
					} else {
						this.Gauge.series[0].name = '要起飞了'
						this.Gauge.series[0].color = '#f04864'
					}
					this.showGauge1("canvasGauge", this.Gauge)
				}, 3000)

			},

			// 词云图
			// showData(canvasId, chartData) {
			// 	const ctx = uni.createCanvasContext(canvasId, this)
			// 	uChartsInstance[canvasId] = new uCharts({
			// 		context: ctx,
			// 		type: 'map',
			// 		fontSize: 11,
			// 		padding: [0, 0, 0, 0],
			// 		legend: {
			// 			show: false
			// 		},
			// 		background: '#FFFFFF',
			// 		pixelRatio: _self.pixelRatio,
			// 		series: chartData.series,
			// 		dataLabel: true,
			// 		width: _self.cWidth * _self.pixelRatio,
			// 		height: _self.cHeight * _self.pixelRatio,
			// 		extra: {
			// 			map: {
			// 				border: true,
			// 				borderWidth: 1,
			// 				borderColor: '#666666',
			// 				fillOpacity: 0.6
			// 			}
			// 		}
			// 	});
			// },
			// 行政区域图
			// showMap(canvasId, chartData) {
			// 	const ctx = uni.createCanvasContext(canvasId, this)
			// 	uChartsInstance[canvasId] = new uCharts({
			// 		context: ctx,
			// 		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			// 			"#ea7ccc"
			// 		],
			// 		padding: [0, 0, 0, 0],
			// 		dataLabel: true,
			// 		extra: {
			// 			map: {
			// 				border: true,
			// 				borderWidth: 1,
			// 				borderColor: "#666666",
			// 				fillOpacity: 0.6,
			// 				activeBorderColor: "#F04864",
			// 				activeFillColor: "#FACC14",
			// 				activeFillOpacity: 1
			// 			}
			// 		}
			// 	});
			// },
			// touchMap(e) {
			// console.log(e)
			// this.$refs.map.showToolTip(e, {
			// 	format: function(item, category) {
			// 		return item.name
			// 	}
			// });
			// },
			//my仪表盘
			showGauge1(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "gauge",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: `${Math.floor(data.series[0].data * 100)}Km/h`,
						fontSize: 18,
						color: data.series[0].color,
						offsetY: 0
					},
					subtitle: {
						name: data.series[0].name,
						fontSize: 15,
						color: data.series[0].color,
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				});
			},
			// 圆环图
			showRing(canvasId, chartData) {
				const ctx = uni.createCanvasContext(canvasId, this)
				uChartsInstance[canvasId] = new uCharts({
					type: "ring",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: chartData.series,
					animation: true,
					rotate: false,
					rotateLock: false,
					background: "#FFFFFF",
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收益率",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "70%",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							// ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 0,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				});
			},
			touchRing(e) {
				uChartsInstance[e.target.id].showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},

			// 饼状图
			showPie(canvasId, chartData) {
				const ctx = uni.createCanvasContext(canvasId, this)
				uChartsInstance[canvasId] = new uCharts({
					type: "pie",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: chartData.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				});
			},
			touchPie(e) {
				uChartsInstance[e.target.id].showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},

			// 折线图
			showArea(canvasId, chartData) {
				const ctx = uni.createCanvasContext(canvasId, this)
				uChartsInstance[canvasId] = new uCharts({
					type: 'area',
					fontSize: 11,
					context: ctx,
					legend: false,
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.Area.categories,
					series: _self.Area.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						// boundaryGap: false,
					},
					yAxis: {
						// gridType: 'dash',
						// gridColor: '#CCCCCC',
						// dashLength: 8,
						// splitNumber: 5,
						// min: 10,
						// max: 180,
						// boundaryGap: false,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},
			touchArea(e) {
				uChartsInstance[e.target.id].showToolTip(e, {
					format: function(item, category) {
						return item.name + ' ' + category + ' ' + ':' + item.data
					}
				});
			},

			// 雷达图
			showRadar(canvasId, chartData) {
				const ctx = uni.createCanvasContext(canvasId, this)
				uChartsInstance[canvasId] = new uCharts({
					type: 'radar',
					context: ctx,
					fontSize: 11,
					padding: [40, 15, 30, 15],
					legend: {
						show: false
					},
					colors: ['#14bcff'],
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							max: 100, //雷达数值的最大值
							opacity: 0.6,
							labelColor: '#333333'
						}
					}
				});
			},
			// ucharts end

		}
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.chartsMain {
		width: 750rpx;
		height: 450rpx;
		padding-top: 15rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-top: 2rpx solid #f2f2f2;

		.charts {
			width: 750rpx;
			height: 450rpx;
			box-sizing: border-box;
		}
	}
</style>
